<template>
  <v-data-table :headers="headers" :items="desserts" sort-by="calories" class="elevation-1">
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>解析规则维护</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="800px">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">新增规则</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                   <v-col cols="12" sm="6" md="4">
                      <v-select 
                    :items="busseItems" 
                    label="事件名称" 
                    v-model="editedItem.busse"
                    item-text="sceneName"
                    item-value="sceneCode"

                    ></v-select>
                   </v-col>
                  <!-- 
                    <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.scenseq" label="场景码"></v-text-field>
                  </v-col> -->

                 <v-col cols="12" sm="6" md="4">
                     <v-select 
                     :items="productCodeItems" 
                     label="核算产品码" 
                     v-model="editedItem.productCode"
                      item-text="prdruleName"
                      item-value="prdruleCode"
                     ></v-select>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                     <v-select 
                     :items="elementItems" 
                     label="金额解析要素" 
                     v-model="editedItem.elements"
                     
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                   
                  </v-col>
                   <v-col cols="12" sm="6" md="4"> 
                    <v-select 
                    :items="flgdcItems" 
                    label="借贷方向" 
                    v-model="editedItem.flgdc"
                  item-text="name"
                  item-value="attributes"
                    ></v-select>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                  <v-select :items="accenmdItems" 
                  label="记账方式" 
                  v-model="editedItem.accenmd"
                  
                  item-text="name"
                  item-value="attributes"
                  ></v-select>
                  </v-col>
                 
                  <v-col cols="12" sm="6" md="4">
                    <v-select 
                    :items="subsrcItems" 
                    label="科目来源"
                     v-model="editedItem.subsrc"
                      item-text="name"
                  item-value="attributes"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="12" md="12">

                    <v-autocomplete
                      v-model="editedItem.busnoa"
                      :items="busnoaItems"
                      chips
                      clearable
                      hide-details
                      hide-selected
                      item-text="glSubjectInfo"
                      item-value="businessCode"
                      label="请选择业务代号"
                      solo
                    ></v-autocomplete>
                    <!-- <v-text-field v-model="editedItem.busnoa" label="业务代号"></v-text-field> -->
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.sernob" label="序号"></v-text-field>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                      <v-select 
                      :items="orgSourceItems" 
                      label="机构号来源" 
                      v-model="editedItem.orgSource"
                    
                                  item-text="name"
                                  item-value="attributes"
                      ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                      <v-select 
                      :items="orgFlagItems" 
                      label="机构号标识" 
                      v-model="editedItem.orgFlag"
                      
                            item-text="name"
                            item-value="attributes"
                      ></v-select>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">

                     <v-select 
                     :items="brcInfoItems" 
                     label="机构编号" 
                     v-model="editedItem.orgId"
                      item-text="brcname"
                      item-value="brc"
                     ></v-select>
                  </v-col>
                 
       
                </v-row>
                <v-row>
                  <v-col cols="12" sm="12" md="12">
                    <v-text-field v-model="editedItem.amountExpression" label="金额表达式"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="12" md="12">
                      <v-card class="mx-auto"
                        max-width="600">
                        <v-card-title>
                          金额表达式拼接 
                          <v-spacer></v-spacer>
                          <v-btn color="blue darken-1"  @click="editedItem.amountExpression=''">清除</v-btn>
                        </v-card-title>
                        <v-card-text>

                          <v-chip-group
                           
                            column
                            
                          >
                          <v-chip v-for="item in elementItems2" :key="item.id"
                            filter
                            outlined
                            @click="addExp(item)"
                          >
                            {{item.name}}
                          </v-chip>
                          </v-chip-group>
                        
                        </v-card-text>
                      </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">取消</v-btn>
              <v-btn color="blue darken-1" text @click="save">保存</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>


   <template v-slot:item.flgdc="{ item }">
      <span v-for="s in flgdcItems" v-if="item.flgdc==s.attributes">{{s.name}}</span>
    </template>

    <template v-slot:item.elements="{ item }">
      <span v-for="s in elementItems" v-if="item.elements==s.attributes">{{s.name}}</span>
    </template>


    <template v-slot:item.accenmd="{ item }">
      <span v-for="s in accenmdItems" v-if="item.accenmd==s.attributes">{{s.name}}</span>
    </template>

    <template v-slot:item.subsrc="{ item }">
      <span v-for="s in subsrcItems" v-if="item.subsrc==s.attributes">{{s.name}}</span>
    </template>

    <template v-slot:item.orgSource="{ item }">
      <span v-for="s in orgSourceItems" v-if="item.orgSource==s.attributes">{{s.name}}</span>
    </template>

    <template v-slot:item.orgFlag="{ item }">
      <span v-for="s in orgFlagItems" v-if="item.orgFlag==s.attributes">{{s.name}}</span>
    </template>

    <template v-slot:item.scenseq="{ item }">
      <span v-for="s in busseItems" v-if="item.busse==s.sceneName">{{s.sceneCode}}</span>
    </template>

    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">mdi-search-web</v-icon>
      <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
      <v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    brcInfoItems:[],
    productCodeItems:[],
    busseItems:[],
    subsrcItems: [],
    elementItems:[],
    elementItems2:[
      {
        name:'(',
        attributes:'('
      },
      {
        name:')',
        attributes:')'
      },
      {
        name:'+',
        attributes:'+'
      },
      {
        name:'-',
        attributes:'-'
      },
      {
        name:'*',
        attributes:'*'
      },
      {
        name:'/',
        attributes:'/'
      },
      


      {
        name:'0',
        attributes:'0'
      },
      {
        name:'1',
        attributes:'1'
      },
      {
        name:'2',
        attributes:'2'
      },
      {
        name:'3',
        attributes:'3'
      },
      {
        name:'4',
        attributes:'4'
      },
      {
        name:'5',
        attributes:'5'
      },
      {
        name:'6',
        attributes:'6'
      },
      {
        name:'7',
        attributes:'7'
      },
      {
        name:'8',
        attributes:'8'
      },
      {
        name:'9',
        attributes:'9'
      },
      {
        name:'0.',
        attributes:'0.'
      },
  


    ],
    flgdcItems:[],
    accenmdItems:[],
    orgSourceItems:[],
    orgFlagItems:[],
    busnoaItems:[],
    dialog: false,
   
    headers: [
      {
        text:'产品码',
        value:'productCode',
        width:150
      },
     
      { text: "事件名称", value: "busse" ,width:150},
      { text: "解析要素", value: "elements",width:150 },
      { text: "借贷方向", value: "flgdc" ,width:150},
      { text: "记账方式", value: "accenmd" ,width:150},
      { text: "科目来源", value: "subsrc",width:150 },
       { text: "业务代号", value: "busnoa" ,width:150},
        { text: "序号", value: "sernob" ,width:150},
         { text: "机构号来源", value: "orgSource",width:150 },
          { text: "机构号标识", value: "orgFlag",width:150 },
           { text: "机构号", value: "orgId" ,width:150},
            { text: "金额表达式", value: "amountExpression",width:150 },
      { text: "操作", value: "actions", sortable: false,width:150 }
    ],
    desserts: [],

    editedIndex: -1,
    editedItem: {
      scenseq: "",
      busse: "",
      elements: "",
      flgdc: "",
      accenmd: "",
      subsrc: "",
      busnoa: "",
      sernob: "",
      orgSource: "",
      orgFlag: "",
      orgId: "",
      amountExpression: "",
    },
    defaultItem: {
      scenseq: "",
      busse: "",
      elements: "",
      flgdc: "",
      accenmd: "",
      subsrc: "",
      busnoa: "",
      sernob: "",
      orgSource: "",
      orgFlag: "",
      orgId: "",
      amountExpression: "",
    productCode:"",
     
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增" : "修改";
    }
  },

  watch: {
    dialog(val) {
      val || this.close();
    }
  },

  created() {
    this.initialize();
    this.getDict()
  },

  methods: {
    initialize() {
     this.axios
        .get("/rules/list")
        .then(response => {
          this.desserts = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
    },
    getDict(){

       this.axios
        .get("/dict/topName/记账方式")
        .then(response => {
          this.accenmdItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/科目来源")
        .then(response => {
          this.subsrcItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
         this.axios
        .get("/dict/topName/金额解析要素")
        .then(response => {
          this.elementItems = response.data.data;
          this.elementItems.forEach(ele=>{
            this.elementItems2.push(ele)
          })
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/借贷方向")
        .then(response => {
          this.flgdcItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });

         this.axios
        .get("/dict/topName/机构号来源")
        .then(response => {
          this.orgSourceItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });

         this.axios
        .get("/dict/topName/机构号标识")
        .then(response => {
          this.orgFlagItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });

          this.axios
        .get("/scene/list")
        .then(response => {
          this.busseItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });


         this.axios
        .get("/subject/list")
        .then(response => {
          this.busnoaItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/prdrule/listDistinct")
        .then(response => {
          this.productCodeItems = response.data.data;
        })

        this.axios
        .get("/brcInfo/list")
        .then(response => {
          this.brcInfoItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
    },

    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      const index = this.desserts.indexOf(item);
      confirm("确定要删除此条记录吗?") &&
        this.axios.delete('/rules/'+item.id)
          .then(res=>{
            this.desserts.splice(index, 1);
          })
        
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },
    
    save() {
     
       this.axios.post("/rules", this.$qs.stringify(this.editedItem)).then(res => {
          this.initialize();
          this.close();
      },
     
      );

    
      // if (this.editedIndex > -1) {
      //   //Object.assign(this.desserts[this.editedIndex], this.editedItem);
      //   this.axios.post("/rules", this.editedItem).then(res => {
      //     this.initialize()
      // });
      // } else {
      //   this.desserts.push(this.editedItem);
      // }
      
    },
     addExp(item) {
       this.editedItem.amountExpression+=item.attributes
      },
  }
};
</script>